<template>
  <div class="comment_examine table-theme">
    <head-title title="审核--VR评论审核"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <tabs-view :list="classifyList" :tabsIndex="examine_status" @roleType="stateType"></tabs-view>
        </div>

        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总数据数：{{ total }}</p>
      <el-table :data="conmentList">
        <el-table-column
          label="序号"
          align="center"
          prop="comment_id"
        ></el-table-column>
        <el-table-column
          label="VR id"
          align="center"
          prop="vr_id"
        ></el-table-column>
        <el-table-column
          label="用户id"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column
          label="昵称"
          align="center"
          prop="user_name"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.portrait"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="评论内容"
          align="center"
          prop="content"
        ></el-table-column>
        <el-table-column
          label="拒绝原因"
          align="center"
          prop="refuse_reason"
        ></el-table-column>
        <el-table-column
          label="审核状态"
          align="center"
          prop="examine_status_name"
        ></el-table-column>
        <el-table-column
          label="评论时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column
          label="审核时间"
          align="center"
          prop="examine_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.examine_status == 0"
              type="primary"
              size="mini"
              @click="operate(1, scope.row.comment_id)"
              >审核</el-button
            >
            <el-button
              v-if="scope.row.examine_status == 0"
              type="danger"
              size="mini"
              @click="operate(2, scope.row.comment_id)"
              >拒绝</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="operate(3, scope.row.comment_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 拒绝原因弹框 -->
    <el-dialog
      title="拒绝原因"
      :close-on-click-modal="false"
      :visible.sync="remarksDialog"
      center
      :modal-append-to-body="false"
      width="680px"
    >
      <el-form
        :model="remarksForm"
        :rules="remarksFormRules"
        ref="remarksForm"
        label-width="120px"
      >
        <el-form-item label="拒绝原因:" prop="reason">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="remarksForm.reason"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarksDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick('remarksForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import TabsView from '@/components/TabsView'
export default {
  components: {
    ImgPopover,
		TabsView
  },
  data() {
    return {
      remarksDialog: false,
      remarksForm: {
        reason: "",
      },
      remarksFormRules: {
        reason: [
          {
            required: true,
            message: "请输入内容",
          },
        ],
      },
      storeInfo: "", // 展示店铺信息
      storeInfoDialog: false, // 详情弹框
      conmentList: [], // 店铺列表
      total: 0,
      totalData: 0,
      examine_status: 0,
      page: 0,
      classifyList: ["全部","待审核","审核通过","拒绝",],
      searchOption: [
        {
          value: 0,
          label: "VR id",
        },
      ],
      classSelect: 0,
      selectContent: "",
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
      };
      if (this.examine_status != 0) {
        // data.examine_status 0 待审核 1 审核通过 2 拒绝
        data.examine_status = this.examine_status - 1;
      }
      if (this.selectContent != "") {
        data.vr_id = this.selectContent;
      }

      this.$http(this.$ApiList.VrCommentList, data).then((res) => {
        this.conmentList = [];
        if (res.datas.length != 0) {
          this.conmentList = res.datas.list;
          this.total = res.datas.count;
        }
      });
    },
    stateType(type) {
      this.examine_status = type;
      this.init();
    },
    operate(type, comment_id) {
      let data = {
        comment_id: comment_id,
      };
      //type  1审核 2拒绝 3删除
      switch (type) {
        case 1:
          this.$http(this.$ApiList.VrCommentSuccess, data).then((res) => {
            this.$layer.msg("操作成功");
            this.page = 1;
            this.init();
          });
          break;
        case 2:
          this.remarksDialog = true;
          this.remarksForm.comment_id = comment_id;
          break;
        case 3:
          this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$http(this.$ApiList.VrCommentDelete, data).then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.page = 1;
                this.init();
              });
            })
            .catch(() => {});
          break;
      }
    },
    //提交
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http(this.$ApiList.VrCommentRefuse, this.remarksForm).then(
            (res) => {
              this.$layer.msg("操作成功");
              this.remarksDialog = false;
              this.init();
            }
          );
        } else {
          this.$layer.msg("请填写完整信息后提交");
        }
      });
    },
    // 搜素
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    refreshPage() {
      this.page = 1;
      this.selectContent = "";
      this.examine_status = 0;
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.comment_examine {
}
</style>
